<template>
  <div class="app-container">
    <div class="center">
      <div class="lcjk">
        <div class="lcjkTop">
          <div class="lcjkTitle">
            <p class="lcjkTitle1">滤池健康体征</p>
            <p class="lcjkTitle2">{{lcjktz}}</p>
            <img src="../images/line.png" alt="">
          </div>
        </div>
        <!-- 图表 -->
        <div class="lcjkEcharts" ref="Chart1"></div>
      </div>
      <div class="glzb">
        <div class="glzbTop">
          <p class="glzbTitle1">过滤指标监视</p>
          <p class="glzbTitle2">{{glzbjs}}</p>
          <img src="../images/line.png" alt="">
        </div>
        <!-- 图表 -->
        <div class="glzbEcharts" ref="Chart2"></div>
      </div>
      <div class="fxzb">
        <div class="fxzbTop">
          <p class="fxzbTitle1">反洗指标评测</p>
          <p class="fxzbTitle2">{{fxzbpc}}</p>
          <img src="../images/line.png" alt="">
        </div>
        <!-- 图表 -->
        <div class="fxzbEcharts" ref="Chart3"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {lczbinfoTask} from "@/api/nssc/patroltask/patroltask";
let myChart1 = null;
let myChart2 = null;
let myChart3 = null;
export default {
  data(){
    return {
      ltwhd :  0,//滤头完好度
      llsynx: 0,//滤料使用年限
      sbbzsp : 0,//设备标准水平
      llpsl : 0,//滤料跑失率
      clslfh :0,//处理水量负荷
      cbzlfz:0,//赤壁藻类附着
      sssl:0,//实时速率
      stss : 0,//水头损失
      smytjs : 0,//砂面液体监视
      glsc : 0,//过滤时长
      zdqcl :0,//浊度去除率
      fxszcp :0,//反洗水质测评
      fxnhcp : 0,//反洗能耗测评
      fxlccp : 0,//反洗滤层测评
      lcjktz:0,//滤池健康体征
      glzbjs:0,//过滤指标监视
      fxzbpc:0,//反洗指标评测
      options: [
        {
          value: '1',
          label: '1滤格'
        },
        {
          value: '2',
          label: '2滤格'
        },
        {
          value: '3',
          label: '3滤格'
        },
        {
          value: '4',
          label: '4滤格'
        },
        {
          value: '5',
          label: '5滤格'
        },
        {
          value: '6',
          label: '6滤格'
        },
        {
          value: '7',
          label: '7滤格'
        },
        {
          value: '8',
          label: '8滤格'
        }
      ],
      value: '1',
      queryParams: {
        pondnum:undefined,
      }
    }
  },
  created(){
  },
  mounted(){
    this.pjzbxx();//评价指标详细
  },
  beforeDestroy() {
    if(myChart1 != null){myChart1.clear();myChart1 = null;}
    if(myChart2 != null){myChart2.clear();myChart2 = null;}
    if(myChart3 != null){myChart3.clear();myChart3 = null;}
  },
  methods:{
    //评价指标详细
    pjzbxx() {
      lczbinfoTask(this.queryParams).then(response => {
        //滤池评价详情
        if(typeof response.data!="undefined" && response.data.lczb!=null){
          this.ltwhd = response.data.lczb.ltwhd;//滤头完好度
          this.llsynx = response.data.lczb.llsynx;//滤料使用年限
          this.sbbzsp = response.data.lczb.sbbzsp;//设备保障水平
          this.llpsl = response.data.lczb.llpsl;//滤料跑失率
          this.clslfh =response.data.lczb.clslfh;//处理水量负荷
          this.cbzlfz=response.data.lczb.cbzlfz;//赤壁藻类附着
          this.sssl=response.data.lczb.sssl;//实时速率
          this.stss = response.data.lczb.stss;//水头损失
          this.smytjs = response.data.lczb.smytjs;//砂面液体监视
          this.glsc =response.data.lczb.glsc;//过滤时长
          this.zdqcl =response.data.lczb.zdqcl;//浊度去除率
          this.fxszcp = response.data.lczb.fxszcp;//反洗水质测评
          this.fxnhcp =response.data.lczb.fxnhcp;//反洗能耗测评
          this.fxlccp = response.data.lczb.fxlccp;//反洗滤层测评
          this.lcjktz=response.data.lczb.lcjktz>0?response.data.lczb.lcjktz.toFixed(2):0;//滤池健康体征
          this.glzbjs=response.data.lczb.glzbjs>0?response.data.lczb.glzbjs.toFixed(2):0;//过滤指标监视
          this.fxzbpc=response.data.lczb.fxzbpc>0?response.data.lczb.fxzbpc.toFixed(2):0;//反洗指标评测
        }
        this.echarts1(this.llsynx,this.sbbzsp,this.cbzlfz,this.clslfh,this.llpsl,this.ltwhd);//滤池健康体征
        this.echarts2(this.sssl,this.stss,this.smytjs,this.glsc,this.zdqcl);//过滤指标监视
        this.echarts3(this.fxszcp,this.fxlccp,this.fxnhcp);//反洗指标测评
      });

    },
    //滤池健康体征
    echarts1(llsynx,sbbzsp,cbzlfz,clslfh,llpsl,ltwhd){
      let option;
      option = {
        series: [
          {
            type: 'pie',
            radius: [20, 80],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              {
                value: ltwhd,
                name: '滤头完好程度',
                label: {
                  fontSize: 13,
                  show: true,
                  position: 'outside',
                  formatter: '{b}:{c}',
                  textStyle:{
                    color:'#C4D8FA'
                  }
                }
              },
              {
                value: llpsl,
                name: '滤料跑失率',
                label: {
                  fontSize: 13,
                  show: true,
                  position: 'outside',
                  formatter: '{b}:{c}' ,
                  textStyle:{
                    color:'#C4D8FA'
                  }
                },
              },
              {
                value: clslfh,
                name: '处理水量负荷',
                label: {
                  fontSize: 13,
                  show: true,
                  position: 'outside',
                  formatter: '{b}:{c}' ,
                  textStyle:{
                    color:'#C4D8FA'
                  }
                },
              },
              {
                value: cbzlfz,
                name: '池壁藻类附着情况',
                label: {
                  fontSize: 13,
                  show: true,
                  position: 'outside',
                  formatter: '{b}:{c}' ,
                  textStyle:{
                    color:'#C4D8FA'
                  }
                },
              },
              {
                value: sbbzsp,
                name: '设备保障水平',
                label: {
                  fontSize: 13,
                  show: true,
                  position: 'outside',
                  formatter: '{b}:{c}' ,
                  textStyle:{
                    color:'#C4D8FA'
                  }
                },
              },
              {
                value: llsynx,
                name: '滤料使用年限',
                label: {
                  fontSize: 13,
                  show: true,
                  position: 'outside',
                  formatter: '{b}:{c}' ,
                  textStyle:{
                    color:'#C4D8FA'
                  }
                },
              }
            ],
            labelLine: {
              show: true,
              length: 10,
              length2: 20
            }
          }
        ]
      };
      //通过$ref进行挂载
      myChart1 = echarts.init(this.$refs.Chart1);
      myChart1.setOption(option);
      window.addEventListener("resize", () => {
        if(myChart1!=null)myChart1.resize();
      });//同比缩放
    },
    //过滤指标监视
    echarts2(sssl,stss,smytjs,glsc,zdqcl){
      let option;
      option = {
        series: [
          {
            type: 'pie',
            radius: [20, 80],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              {
                value: zdqcl,
                name: '浊度去除率',
                label: {
                  fontSize: 13,
                  show: true,
                  position: 'outside',
                  formatter: '{b}: {c}',
                  textStyle:{
                    color:'#C4FFBE'
                  }
                },
              },
              {
                value: glsc,
                name: '过滤时长',
                label: {
                  fontSize: 13,
                  show: true,
                  position: 'outside',
                  formatter: '{b}: {c}',
                  textStyle:{
                    color:'#C4FFBE'
                  }
                }
              },
              {
                value: smytjs,
                name: '砂面液体监视',
                label: {
                  fontSize: 13,
                  show: true,
                  position: 'outside',
                  formatter: '{b}: {c}' ,
                  textStyle:{
                    color:'#C4FFBE'
                  }
                }
              },
              {
                value: stss,
                name: '水头损失',
                label: {
                  fontSize: 13,
                  show: true,
                  position: 'outside',
                  formatter: '{b}: {c}' ,
                  textStyle:{
                    color:'#C4FFBE'
                  }
                }
              },
              {
                value: sssl,
                name: '实时滤速',
                label: {
                  fontSize: 13,
                  show: true,
                  position: 'outside',
                  formatter: '{b}: {c}',
                  textStyle:{
                    color:'#C4FFBE'
                  }
                }
              }
            ],
            labelLine: {
              show: true,
              length: 10,
              length2: 20
            }
          }
        ]
      };
      //通过$ref进行挂载
      myChart2 = echarts.init(this.$refs.Chart2);
      myChart2.setOption(option);
      window.addEventListener("resize", () => {
        if(myChart2!=null)myChart2.resize();
      });//同比缩放
    },
    // 反洗指标测评
    echarts3(fxszcp,fxlccp,fxnhcp){
      let option;
      option = {
        series: [
          {
            type: 'pie',
            radius: [20, 80],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              {
                value: fxnhcp,
                name: '反洗耗能测评',
                label: {
                  fontSize: 13,
                  show: true,
                  position: 'outside',
                  formatter: '{b}: {c}',
                  textStyle:{
                    color:'#FFE1BE'
                  }
                },
              },
              {
                value: fxlccp,
                name: '反洗滤层测评',
                label: {
                  fontSize: 13,
                  show: true,
                  position: 'outside',
                  formatter: '{b}: {c}',
                  textStyle:{
                    color:'#FFE1BE'
                  }
                }
              },
              {
                value: fxszcp,
                name: '反洗水质测评',
                label: {
                  fontSize: 13,
                  show: true,
                  position: 'outside',
                  formatter: '{b}: {c}' ,
                  textStyle:{
                    color:'#FFE1BE'
                  }
                }
              },
            ],
            labelLine: {
              show: true,
              length: 10,
              length2: 20
            }
          }
        ]
      };
      //通过$ref进行挂载
      myChart3 = echarts.init(this.$refs.Chart3);
      myChart3.setOption(option);
      window.addEventListener("resize", () => {
        if(myChart3!=null)myChart3.resize();
      });//同比缩放
    }
  }
}
</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
}
.app-container{
  width: 100%;
  height: calc(100vh - 40px);
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #011137 !important;
}
.center{
  width: 100%;
  height: 100%;
  display: flex;
  //flex-direction: column;
  justify-content: center;
  align-items: center;
}
.lcjk{
  width: 30%;
  height: 90%;
  // margin-left: 20px;
  border-right: dashed 1px #081a4a;
  // background-image: url(../images/lcjktz1.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .lcjkTop{
    width: 100%;
    height: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .lcjkTitle{
      height: 50%;
      margin-top: 53.5px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .lcjkTitle1{
        width: 108px;
        height: 18px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 18px;
        color: #4873c1;
        margin-bottom: 17.5px;
      }
      .lcjkTitle2{
        width: 116px;
        height: 27px;
        margin-bottom: 9.5px;
        font-family: TenSans;
        font-weight: bold;
        font-size: 24px;
        color: #FFFFFF;
        background: linear-gradient(0deg, #4882b5 0%, #8EC0FE 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    .lcjkSy{
      height: 10%;
      display: flex;
      margin-left: 12.5px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 14px;
      color: #7d97d0;
      .lcjkP2{
        color: #5dcbff;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 5px;
        width: 39px;
        height: 14px;
        background: #0F1A43;
        border-radius: 5px;
        border: 1px solid #54619D;
      }
    }
  }
  .lcjkEcharts{
    width: 100%;
    height: 60%;

  }
}
.glzb{
  width: 30%;
  height: 90%;
  margin-left: 20px;
  border-right: dashed 1px #081a4a;
  // background-image: url(../images/glzbjs1.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .glzbTop{
    width: 100%;
    height: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .glzbTitle1{
      width: 108px;
      height: 18px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 18px;
      color: #4873c1;
      margin-top: 49.5px;
      //margin-bottom: 17.5px;
    }
    .glzbTitle2{
      width: 116px;
      height: 27px;
      margin-top: 17.5px;
      margin-bottom: 9.5px;
      font-family: TenSans;
      font-weight: bold;
      font-size: 24px;
      color: #FFFFFF;
      background: linear-gradient(0deg, #74b76d 0%, #BCF5B7 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .glzbEcharts{
    width: 100%;
    height: 60%;
    //background: #BCF5B7;
  }
}
.fxzb{
  width: 30%;
  height: 90%;
  margin-left: 20px;
  // background-image: url(../images/fxzbpc1.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .fxzbTop{
    width: 100%;
    height: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .fxzbTitle1{
      width: 108px;
      height: 18px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 18px;
      color: #4873c1;
      margin-top: 49.5px;
      //margin-bottom: 17.5px;
    }
    .fxzbTitle2{
      width: 116px;
      height: 27px;
      margin-top: 17.5px;
      margin-bottom: 9.5px;
      font-family: TenSans;
      font-weight: bold;
      font-size: 24px;
      color: #FFFFFF;
      background: linear-gradient(0deg, #af9a5d 0%, #C99D58 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .fxzbEcharts{
    width: 100%;
    height: 60%;
    //background: #BCF5B7;
  }
}
</style>
